<template>
  <div class="Abnormallist">
    <section class="main">
      <el-form :inline="true" class="demo-form-inline main_form" v-model="searchForm">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="设备编号">
              <el-input v-model="searchForm.deviceId" placeholder="请输入设备编号"></el-input>
            </el-form-item>
            <el-form-item label="设备名称">
              <el-input v-model="searchForm.deviceName" placeholder="请输入设备名称"></el-input>
            </el-form-item>
            <el-form-item label="设备类别">
              <el-select v-model="searchForm.deviceType" clearable placeholder="请选择">
                <el-option
                  v-for="item in TypeData"
                  :key="item.deviceModelName"
                  :label="item.deviceModelName"
                  :value="item.deviceModelName"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchabnomalDevice">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <section class="main_table">
        <el-table
          ref="multipleTable"
          v-bind:data="previewlistabnData"
          style="width: 100%"
          v-bind:max-height="height"
          v-bind:header-cell-style="{background: '#1f2548',color:'#fff'}"
          v-bind:cell-style="{padding:'10px'}"
          @selection-change="handleSelectionChange"
          fit
        >
          <el-table-column align="center" type="selection" width="55px"></el-table-column>
          <el-table-column align="center" sortable prop="deviceId" label="设备编号" max-width="120"></el-table-column>
          <el-table-column align="center" sortable prop="deviceName" label="设备名称" max-width="120"></el-table-column>
          <el-table-column align="center" sortable prop="registered" label="设备状态" max-width="120"></el-table-column>
          <el-table-column align="center" sortable prop="deviceType" label="设备类别" max-width="120"></el-table-column>
          <el-table-column align="center" prop="deviceSn" label="设备SN码" max-width="120"></el-table-column>
          <el-table-column align="center" prop="runTime" label="运行时间" max-width="120"></el-table-column>
          <el-table-column align="center" prop="createDate" label="创建时间" max-width="120"></el-table-column>
        </el-table>
        <section class="toolFoot">
          <el-row :gutter="25">
            <el-col :span="24" class="rightCol">
              <el-pagination
                small
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next ,jumper"
                :total="total"
                :pager-count="5"
              ></el-pagination>
            </el-col>
          </el-row>
        </section>
      </section>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../../api/devicemg/subabnormal/abnormallist.js"></script>

<style lang="scss">
.Abnormallist {
  width: 100%;
  margin-top: -2%;
  > section {
    &.main {
      > .main_form {
        .el-input__inner {
          height: 30px;
          line-height: 30px;
          width: 100%;
          background-color: #85899c;
          color: #fff;
          border: 1px solid #85899c;
        }
        .el-button {
          height: 30px;
          padding: 8px 20px;
          background-color: #44abf5;
        }
      }
      > .main_table {
        > .toolFoot {
          margin-top: 16px;
          .rightCol {
            text-align: right;
            .el-pagination--small {
              white-space: nowrap;
              padding: 2px 5px;
              color: #303133;
              font-weight: 700;
              height: 50px;
              span {
                color: #fff;
                line-height: 30px;
                .el-input {
                  .el-input__inner {
                    height: 30px;
                    line-height: 30px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
